{% from "../../macros/attributes.njk" import govukAttributes %}

{%- macro _tabListItem(params, item, index) %}
{% set tabPanelId = item.id if item.id else idPrefix + "-" + index -%}
<li class="govuk-tabs__list-item {%- if index == 1 %} govuk-tabs__list-item--selected{% endif %}">
  <a class="govuk-tabs__tab" href="#{{ tabPanelId }}"
    {{- govukAttributes(item.attributes) }}>
    {{ item.label }}
  </a>
</li>
{% endmacro -%}

{%- macro _tabPanel(params, item, index) %}
{% set tabPanelId = item.id if item.id else idPrefix + "-" + index -%}
<div class="govuk-tabs__panel {%- if index > 1 %} govuk-tabs__panel--hidden{% endif %}" id="{{ tabPanelId }}"
  {{- govukAttributes(item.panel.attributes) }}>
{% if item.panel.html %}
  {{ item.panel.html | safe | trim | indent(2) }}
{% elif item.panel.text %}
  <p class="govuk-body">{{ item.panel.text }}</p>
{% endif %}
</div>
{% endmacro -%}

{#- If an id 'prefix' is not passed, fall back to using the name attribute
  instead. We need this for error messages and hints as well -#}
{% set idPrefix = params.idPrefix if params.idPrefix -%}

<div {%- if params.id %} id="{{ params.id }}"{% endif %} class="govuk-tabs {%- if params.classes %} {{ params.classes }}{% endif %}"
  {{- govukAttributes(params.attributes) }} data-module="govuk-tabs">
  <h2 class="govuk-tabs__title">
    {{ params.title | default ("Contents") }}
  </h2>
{% if params.items | length %}
  <ul class="govuk-tabs__list">
    {% for item in params.items %}
      {% if item %}
        {{- _tabListItem(params, item, loop.index) | trim | indent(4, true) }}
      {% endif %}
    {% endfor %}
  </ul>
  {% for item in params.items %}
    {% if item %}
      {{- _tabPanel(params, item, loop.index) | trim | indent(2, true) }}
    {% endif %}
  {% endfor %}
{% endif %}
</div>
